<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>疫情数据统计分析系统</title>
    <link href="magicalcoder/css/layui.css" rel="stylesheet" />
    <link href="magicalcoder/magicalcoder.css" rel="stylesheet" />
    <script src="magicalcoder/json3.min.js"></script>
    <script src="magicalcoder/echarts.min.js"></script>
    <script src="magicalcoder/dataTool.min.js"></script>
    <script src="magicalcoder/layui.all.js"></script>
    <script src="magicalcoder/common.js"></script>
    <script src="magicalcoder/magicalcoder.js"></script>
    <script src="js/jquery-3.6.0.js"></script>
</head>

<body class="layui-form">
    <div id="magicalDragScene" class="mc-root mc-ui-absolute-pane" style="background-color: rgb(252, 250, 250);">
        <span class="mc-ui-geometry-char"
            style="height: 100px; width: 100%; position: absolute; left: -0.159236%; top: -0.285714%; background-color: rgb(1, 170, 237);"></span>
        <span class="mc-ui-geometry-char"
            style="height: 20px; width: 300px; position: absolute; left: 4.7%; top: 3.14286%; color: rgb(249, 246, 246); font-size: 30px;">疫情数据统计分析系统</span>
        <table class="layui-table" style="position: absolute; left: -0.6%; top: 12.8571%; width: 20%;">
            <thead>
                <tr>
                    <th style="background-color: rgb(10, 112, 207); color: rgb(255, 255, 255); font-size: 16px;">数据管理
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <a style="width: 20%; height: 30px; font-size: 15px; color: rgb(153, 153, 153);"
                            href="sjlr.html">数据录入</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a style="color: rgb(153, 153, 153);"
                            href="sjcx.html">数据查询</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a style="color: rgb(153, 153, 153);" href="tbzs.html">图表展示</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="layui-table" style="position: absolute; left: -0.4%; top: 39.7143%; width: 20%;">
            <thead>
                <tr>
                    <th style="color: rgb(248, 245, 245); background-color: rgb(10, 112, 207); width: 20%;">系统管理</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <a style="color: rgb(153, 153, 153);" href="yhlr.html">用户录入</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a style="color: rgb(153, 153, 153);" href="yhbj.html">用户编辑</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <a class="layui-btn"
            style="position: absolute; left: 82%; top: 6%; width: 10%; height: 40px; font-size: 15px;" onclick="window.location.href='index.html'">退出登录</a>
        <table class="layui-table" style="position: absolute; left: 20.7006%; top: 39.7143%; width: 79%;"
            id="prodetail">
            <thead>
                <tr>
                    <th style="text-align: center;">省份</th>
                    <th style="text-align: center;">确诊人数</th>
                    <th style="text-align: center;">治愈人数</th>
                    <th style="text-align: center;">死亡人数</th>
                    <th style="text-align: center;">疑似人数</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <span class="mc-ui-geometry-char"
            style="height: 20px; width: 100px; position: absolute; left: 23.4%; top: 28.7143%; font-size: 20px;">省 
            份：</span>
        <input class="layui-input" style="position: absolute; left: 29.5%; top: 28%;" type="text" autocomplete="off"
            placeholder="请输入省份" id="proinput"/>
        <span class="mc-ui-geometry-char"
            style="height: 20px; width: 100px; position: absolute; left: 23.4%; top: 20.7143%; font-size: 20px;">日 
            期：</span>
        <input name="createTime" class="magicalcoder-laydate layui-input"
            style="position: absolute; left: 29.5%; top: 19.8571%;" type="text" autocomplete="off"
            lay-verify="magicalCoderVerify" mc-attr-bool-is-init-value="false" mc-attr-str-type="date"
            mc-attr-bool-show="false" id="createTime"/>
        <a class="layui-btn" style="position: absolute; left: 42.2%; top: 28%;" id="queryBtn">查询</a>
        <script src="province.js"></script>
    </div>
    <script>
        //以下脚本为标签属性转换成layui组件的还原过程
        //调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
        var $ = layui.jquery,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            form = layui.form,
            layedit = layui.layedit,
            slider = layui.slider,
            element = layui.element,
            colorpicker = layui.colorpicker,
            upload = layui.upload,
            rate = layui.rate,
            carousel = layui.carousel,
            table = layui.table,
            flow = layui.flow;
        var magicalDragLayuiUtil = {
            rebuildLayUiControls: function () {
                var _t = this;
                //日期
                $(".magicalcoder-laydate").each(function (idx, item) {
                    laydate.render(_t.iteratorAttr({
                        elem: item
                    }, item));
                })
                //富文本
                $(".magicalcoder-layedit").each(function (idx, item) {
                    var mcDataId = $(item).attr("id");
                    if (mcDataId) {
                        layedit.build(mcDataId, {
                            height: 300
                        });
                    }
                })
                //外键
                $(".magicalcoder-foreign-select2").each(function (idx, item) {
                    var mcDataId = $(item).attr("id");
                    if (mcDataId) {
                        $("#" + mcDataId).select2({
                            allowClear: true,
                            width: "150px",
                            delay: 500,
                        });
                    }
                })
                //颜色选择器
                $(".magicalcoder-color-picker").each(function (idx, item) {
                    colorpicker.render(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //上传组件
                $(".magicalcoder-layupload").each(function (idx, item) {
                    upload.render(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //滑块
                $(".magicalcoder-slider").each(function (idx, item) {
                    slider.render(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //评分
                $(".magicalcoder-rate").each(function (idx, item) {
                    rate.render(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //轮播
                $(".layui-carousel").each(function (idx, item) {
                    carousel.render(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //流加载
                $(".magicalcoder-flow").each(function (idx, item) {
                    flow.load(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //代码
                $(".magicalcoder-code").each(function (idx, item) {
                    layui.code(_t.iteratorAttr({
                        elem: $(item)
                    }, item));
                })
                //弹窗
                $(".magicalcoder-layer").each(function (idx, item) {
                    //先隐藏起来
                    $(this).next().hide();
                    $(this).click(function () {
                        var config = _t.iteratorAttr({
                            elem: $(item)
                        }, item);
                        var type = config.type;
                        if (type + '' == 1) {
                            config.content = $(this).next();
                            if (!config.content.hasClass("magicalcoder-layer-content")) {
                                config.content = config.content.find(
                                    ".magicalcoder-layer-content")
                            }
                        }
                        if (config.btn) {
                            config.btn = config.btn.split(",")
                        }
                        if (config.area) {
                            config.area = config.area.split(",")
                        }
                        layer.open(config)
                    })
                })
                //动态表格 我们单独封装了layui-table的初始化方式 至于数据排序 返回格式 等操作请根据你的具体环境自行封装
                $(".magicalcoder-table").each(function (idx,
                    item) {
                    var cols = [];
                    //读取列配置
                    $(this).find(".magicalcoder-table-th").each(function (i, th) {
                        cols.push(_t.iteratorAttr({
                            title: $(this).text()
                        }, th));
                    })
                    var tableConfig = _t.iteratorAttr({
                            elem: $(item),
                            cols: [cols]
                        },
                        item);
                    //初始化表格 至于返回的数据格式 您可以根据自己的系统自行改造 这里仅做一个示例 参考js\\data\\list.json
                    table.render(tableConfig);
                })
                //部分组件初始化
                element.init();
                //表单初始化
                form.render();
            },
            //将标签上的属性 转换成layui函数初始化时的参数名:参数值
            iteratorAttr: function (renderConfig, dom) {
                var attrs = dom.attributes;
                for (var i = 0; i < attrs.length; i++) {
                    var attr = attrs[i];
                    var name = attr.name;
                    var value = attr.value;
                    if (name.indexOf("mc-") === 0) {
                        name = name.replace("mc-attr-", '');
                        name = name.replace("mc-event-", '');
                        if (name.indexOf('str-') === 0) {
                            name = name.replace('str-', '');
                        } else if (name.indexOf('bool-') === 0) {
                            name = name.replace('bool-', '');
                            value == 'true' || value === '' ? value = true : value = value;
                            value == 'false' ? value = false : value = value;
                        } else if (name.indexOf('num-') === 0) {
                            name = name.replace('num-', '');
                            if (value !== '' && !isNaN(value)) {
                                value = parseFloat(value);
                            }
                        } else if (name.indexOf('json-') === 0) {
                            name = name.replace('json-', '');
                            if (value !== '') {
                                value = JSON.parse(value);
                            }
                        }
                        renderConfig[this.htmlAttrNameToTuoFeng(name)] = value;
                    }
                }
                return renderConfig;
            },
            //user-name -> userName html上的标签名转换成驼峰名称
            htmlAttrNameToTuoFeng: function (name) {
                var arr = name.split("-");
                var newArr = []
                for (var i = 0; i < arr.length; i++) {
                    if (i != 0) {
                        if (arr[i] != '') {
                            newArr.push(this.firstCharToUpLower(arr[i]));
                        }
                    } else {
                        newArr.push(arr[i]);
                    }
                }
                return newArr.join('');
            },
            //首字母大写
            firstCharToUpLower: function (name) {
                var arr = name.split("");
                arr[0] = arr[0].toUpperCase();
                return arr.join('');
            },
        }
        magicalDragLayuiUtil.rebuildLayUiControls();
        //echarts自动初始化
        new McECharts().render();
        //functions-begin
        //functions-end
    </script>
</body>

</html>
